<template>
  <div>
    <footer>
      <p>领劵中心</p>
      <nav>
        <van-tabs v-model="active">
          <van-tab title="每日领卷">内容 1</van-tab>
          <van-tab title="签到领卷">内容 2</van-tab>
          <van-tab title="邀新领卷">内容 3</van-tab>
         
        </van-tabs>
      </nav>
    </footer>
  </div>
</template>

<script>
export default {
 data() {
    return {
      active: 2,
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
footer {
  width: 750px;
  height: 293px;
  background: url(../../../img/get/background.png) no-repeat center center;
  p {
    width: 170px;
    height: 38px;
    font-size: 40px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 36px;
  }
}
 ::v-deep .van-tabs__nav--line{
 
    background-color:#B2B7FF !important ;

    .van-tab--active{
      color: #fff;
    }
    .van-tabs__line{
      background-color: #fff;
      width: 120px;
    }
  }  
 ::v-deep .van-tabs--line .van-tabs__wrap{
  height: 80px;
 }
 ::v-deep .van-tab__text--ellipsis{
  font-size: 25px;
  height: 100%;
  line-height: 80px;
 }
</style>
